Home

The Task

The task this week was to design a webpage to be hosted on the FabAcademy 2013 website to document our work throughout the course

Existing Knowledge

My background in web developement was exactly nothing. For me it had always been a 'i should really learn that' kind of thing, so this was the opportunity.

The options

There were a number of options that could be chosen to accomplish this assignment ranging in difficulty including:

Use an open source blogging page such as Wordpress to design the page without having to get into the depths of html.
This would involve downloading the wordpress program from their webpage and downloading a virtual host such as xampp to asses your progress as you.

Find an open source html template of a site that had a suitible layout etc. and simply modify the content of the code to suit what you need.
This would require an html editor or could be done as a text file and may require editing software and a virtual host to asses the progress.
A google search for html templates provides numerous options.

Learn to code html and write a page from scratch. This also requires an html editing software and some knowledge of coding language.
A number of open source softwares are available for this such as Get-Simple, Libre Office, Brackets

The Decision

  To code the page from scratch.

  WHY: To learn to code html files from first principles.

  WHICH SOFTWARE: I chose to use Brackets. This software was reccommended to me and has a simple to use user interfacing and a built in host simulator that opens a new webpage in your browser to view your progress. It also provides simple error monitoring with a window below the code pane.

The Execution

After installing brackets, the first thing to do was look at some html tutorials. Codeacademy was an excellent first step. This free website offers interactive tutorials that allow you to learn to code from scratch.

Html databases such as w3schools are very useful for finding the tags you need. There are many more online.

Basic Html Coding

Firstly the document type needs to be defined. Here we need the tag

Once the doctype is defined the html tag needs to be defined.

Almost every tag acts as a set of brackets, applying to the contents between the open and close bracket. As such, For every tag you open you need to close with the corresponding close tag. For the html tag /html is the close. The '/' before the tag is usually the close tag but not always so you need to check. Here we would use the command

Next we can define the head and the body of the page with the tags

The body of your page contains all the rest. All of the code/content of your page should be written between these tags.

Headings can be added in varous sizes using the h tags. H1 being the largest through to h6. The effect is as follows:

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

Once you have a heading you can use the paragraph tag to create a paragraph below.

When writing a paragraph simple commands for bold underline and italics can be used.

Nesting is and important principle whereby you can illicit multiple effects on a given component. Nesting involves the nesting of a tag inside that of another tag. This can be done numerous times as long as the tags are positioned in the correct order such that the first tag opened is the last tag closed. For example the code

Note the order of the open tags is reversed in closing tags.